<template>
  <div>
    <t-drawer :visible="props.visible" size="medium" header="支付配置" :footer="null" @close="closeDrawer">
      <t-form ref="paymentEditForm" :data="formData" :rules="FORM_RULES" @reset="onReset" @submit="onSubmit">
        <t-form-item label="支付渠道" name="paymentChannel">
          <t-space>
            <t-radio-group
              v-model="formData.paymentChannel"
              :default-value="0"
              allow-uncheck
              name="paymentChannel"
              :options="PAYMENT_CHANNEL_OPTIONS"
            ></t-radio-group>
          </t-space>
        </t-form-item>

        <t-form-item label="商户类型" name="mchType">
          <t-space>
            <t-radio-group
              v-model="formData.mchType"
              :default-value="0"
              allow-uncheck
              name="mchType"
              :options="MCH_TYPE_OPTIONS"
            ></t-radio-group>
          </t-space>
        </t-form-item>

        <t-form-item label="商户号" name="mchId">
          <t-input v-model="formData.mchId"></t-input>
          <t-tooltip placement="left" content="第三方支付分配的商户号">
            <t-icon slot="statusIcon" name="help-circle" size="20px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>
        <t-form-item label="费率" name="rate">
          <t-input-number v-model="formData.rate" suffix="%"></t-input-number>&nbsp;
          <t-tooltip placement="right" content="商户费率">
            <t-icon slot="statusIcon" name="help-circle" size="20px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>
        <t-form-item label="APIkey" name="apiKey">
          <t-textarea v-model="formData.apiKey" placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="APIkeyV3" name="apiKeyV3">
          <t-textarea v-model="formData.apiKeyV3" placeholder="请输入内容" />
        </t-form-item>
        <t-form-item label="私钥证书文件" name="privateKeyCertPath">
          <t-textarea
            v-model="formData.privateKeyCertPath"
            placeholder="请输入内容"
            :autosize="{ minRows: 2, maxRows: 3 }"
          />
          <t-tooltip placement="left" content="私钥证书文件路径,注意:windows系统路径分隔符为\ linux系统路径分隔符为/">
            <t-icon slot="statusIcon" name="help-circle" size="20px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>
        <t-form-item label="公钥证书文件" name="publicKeyCertPath">
          <t-textarea
            v-model="formData.publicKeyCertPath"
            placeholder="请输入内容"
            :autosize="{ minRows: 2, maxRows: 3 }"
          />
          <t-tooltip placement="left" content="公钥证书文件路径,注意:windows系统路径分隔符为\ linux系统路径分隔符为/">
            <t-icon slot="statusIcon" name="help-circle" size="20px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>
        <t-form-item label="支付回调地址" name="notifyUrl">
          <t-input v-model="formData.notifyUrl"></t-input>
        </t-form-item>
        <t-form-item label="状态" name="paymentStatus">
          <t-switch v-model="formData.paymentStatus" />&nbsp;
          <t-tooltip placement="right" content="该状态可以决定当前的支付配置是否有效">
            <t-icon slot="statusIcon" name="help-circle" size="18px" style="color: #0006" />
          </t-tooltip>
        </t-form-item>
        <t-form-item>
          <t-space>
            <t-button @click="visibleDialog = true"
              ><template #icon><save-icon /></template> 保存配置</t-button
            >
            <t-button theme="default" variant="base" type="reset">重置</t-button>
          </t-space>
        </t-form-item>
      </t-form>
    </t-drawer>

    <t-dialog v-model:visible="visibleDialog" width="270" header="确认保存信息" @confirm="save">
      确定要保存信息吗？
    </t-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
import { SaveIcon } from 'tdesign-icons-vue-next';

import { MessagePlugin } from 'tdesign-vue-next';
import { INITIAL_DATA, FORM_RULES, PAYMENT_CHANNEL_OPTIONS, MCH_TYPE_OPTIONS } from '../constants';
import { getPayment, savePayment } from '@/api/settings';
import { PaymentInfoEditDto } from '@/api/model/settingsModel';

const props = defineProps({
  visible: {
    type: Boolean,
  },
  mchid: {
    type: String,
  },
});

const emit = defineEmits(['onClose']);
const closeDrawer = () => {
  emit('onClose');
};
const visibleDialog = ref(false);

const formData = ref<PaymentInfoEditDto>({ ...INITIAL_DATA });

const onReset = () => {};
const visibleConfirm = ref(false);
const onSubmit = ({ validateResult }) => {
  if (validateResult === true) {
    visibleConfirm.value = true;
  }
};
const save = () => {
  savePayment(formData.value)
    .then((ret) => {
      MessagePlugin.success('保存成功');
    })
    .catch((e) => {
      showErrMessage(e);
    });
  visibleDialog.value = false;
};

const featchData = () => {
  console.log('props.mchid', props.mchid);
  if (props.mchid === '' || props.mchid === undefined) {
    formData.value = { ...INITIAL_DATA };
  } else {
    getPayment(props.mchid).then((ret) => {
      console.log('payment', JSON.stringify(ret));
      formData.value = ret;
    });
  }
};

const showErrMessage = (e: any) => {
  MessagePlugin.error(e.message);
};

onMounted(() => {
  featchData();
});
watch(
  () => props.mchid,
  (newVal, oldVal) => {
    featchData();
  },
);
</script>

<style></style>
